<template>
  <el-dialog title="添加详情" v-model="show" center width="700px" top="70px" :append-to-body="true" :close-on-press-escape="true" :close-on-click-modal="false">
    <div class="v_dialog_body" v-loading="loading">
      <el-form :model="form" ref="form" class="header">
        <div class="header_row">
          <el-form-item style="width:260px;" label="编号" prop="number" :rules="[{ required: true, message: '请输入编号'}]">
            <el-input  size="small" v-model="form.number" placeholder="请输入编号"></el-input>
          </el-form-item>
          <el-form-item style="width:320px; margin-left: 20px;" label="生产过程名称" prop="prdProcessName" :rules="[{ required: true, message: '请选择生产过程名称'}]" >
            <el-input  size="small" v-model="form.prdProcessName" placeholder="请输入生产过程名称"></el-input>
          </el-form-item>
        </div>
        <div class="header_row">
          <el-form-item  style="width:350px;" label="过程详细名称" prop="detailName" :rules="[{ required: true, message: '请输入过程详细名称'}]">
          <el-input size="small" v-model="form.detailName" placeholder="请输入过程详细名称"></el-input>
        </el-form-item>
        </div>
        <div class="header_row">
          <el-form-item style="width:350px;" label="文字描述" prop="content" :rules="[{ required: true, message: '请输入文字描述'}]">
            <el-input type="textarea"  size="small" v-model="form.content" placeholder="请输入文字描述"></el-input>
          </el-form-item>
        </div>
        <div class="header_row">
          <el-form-item label="上传图片" prop="image">
            <el-upload
                list-type="picture-card"
                drag
                :auto-upload="false"
                :on-change="getImage"
                :on-remove="onRemove"
                action=""
                :file-list="fileList"
                multiple>
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="footer">
      <el-button  type="primary" icon="el-icon-check" size="small" v-on:click="doSave">确定</el-button>
      <el-button v-on:click="show = false" icon="el-icon-back" size="small">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  data() {
    return {
      loading: false,
      show: false,
      form: {},
      dataList: [],
      picList: [],
      fileList: [],
    }
  },
  async mounted() {
    await this.getPrdProcess()
  },
  methods: {
    /**
     * 图片改变时
     * */
    getImage(file, fileList) {
      this.handleFileList(fileList)
    },
    /**
     *
     * @param fileList
     */
    handleFileList(fileList) {
      this.fileList = fileList.map(v => {
        return v
      })
    },
    /**
     * 图片删除时
     * @param e
     */
    onRemove(file, fileList) {
      this.handleFileList(fileList)
    },
    async getPrdProcess() {
      this.loading = true;
      try {
        let res = await this.callApi('get_prd_process_list_key', {
          key: this.form.prdProcessName
        })
        if (!res.res) {
          return
        }
        this.dataList = res.data;
      } finally {
        this.loading = false;
      }
    },
    open (row) {
      if (row != null) {
        this.form = row
        this.fileList.push(this.form.pic)
      } else {
        this.form = { prdProcessName: "" }
      }
      this.show = true
    },
    doSave() {
      return this.$refs.form.validate(async valid => {
        if (!valid) return;
        try {
          let file = []
          if (this.fileList && this.fileList.length > 0) {
            this.fileList.forEach(v => {
              file.push(v.raw)
            })
          }
          let res = await this.callApi('update_prd_process', {
            number: this.form.number,
            prdProcessName: this.form.prdProcessName,
            detailName: this.form.detailName,
            content: this.form.content,
            files: file
          })
          if (!res.res) {
            return
          }
          this.$message.success(`创建成功!`)
          this.show = false
          this.$emit("save")
        } finally {
          this.loading = false;
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.header {
  margin-top: 20px;
  position: relative;

  .header_row {
    display: flex;
  }
  :deep(.el-upload-dragger) {
    height: 146px !important;
    width: 146px !important;
  }
}
</style>
